⭐任務說明

😸 React 元件間將使用 props 進行互相傳遞溝通，每個父層元件都可以透過 props 傳遞資訊給子元件，其傳遞的內容可以是物件、陣列或是函式

怎麼傳遞

prop 內容可以是一些屬性值，先試著修改上一個任務中的 Page.js

在這邊我們增加了 ImgList 元件，加了一些屬性

import "./styles.css";

function MyButton() {
  return <button className="btn-primary">karakamin 點我！這是按鈕啦！</button>;
}

function ImgList() {
  return (
    <img
      src="https://i.imgur.com/PLw412j.jpg"
      alt="karakamin"
      width={200}
    />
  );
}

export default function Page() {
  return (
    <div className="app">
      <h1 className="text-primary">React 大秘境</h1>
      <h2>DAY 05</h2>
      <h3>HEY! karakamin 你好！</h3>
      <MyButton />
      <ImgList />
    </div>
  );
}

😸冒險者！你是不是想問這樣有做傳遞嗎？…嗯！沒有！
接著再來微調一點寫法

神奇的元件溝通術

import "./styles.css";

function MyButton() {
  return <button className="btn-primary">karakamin 點我！這是按鈕啦！</button>;
}

function ImgList({ urlItem, size }) {
  return (
    <img
      src="https://i.imgur.com/PLw412j.jpg"
      alt={urlItem.name}
      width={size}
    />
  );
}

export default function Page() {
  return (
    <div className="app">
      <h1 className="text-primary">React 大秘境</h1>
      <h2>DAY 05</h2>
      <h3>HEY! karakamin 你好！</h3>
      <MyButton />
      <ImgList urlItem={{ name: "karakamin" }} size={200} />
    </div>
  );
}

• 這裡將從父元件傳遞 props 給子元件
  

• 傳遞示意圖
  

這樣的方式可以讓元件可重複使用，依照傳入的 props 不同，而有不同的渲染的結果

ES6 解構賦值 Tip!

😸小提醒，在宣告 props 時，因為需要傳入參數，這邊有用到 ES6 的解構賦值

function ImgList({ urlItem, size }) {
  return (
    // ...
  );
}

😸 傳入的參數也可以給預設值，以便沒有傳入參數的時候使用

function ImgList({ urlItem, size = 100 }) {
  return (
    <img
      src="https://i.imgur.com/PLw412j.jpg"
      alt={urlItem.name}
      width={size}
    />
  );
}

這邊的預設值，當 size 為 undefined 的時候才會使用，若為 0 或 null 則不會起作用

今日總結

😸 呼！今天的 props 真的讓人暈頭轉向呢，我們下個任務見